<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="refresh" content="180;/voicegate.php/timeout?token={{TIMEOUT_TOKEN}}" />
    <title>IRC voice gate</title>
    <link rel="stylesheet" href="/static.php/voicegate/style.css" />
  </head>
  <body class="body" {{BACKGROUND_PICTURE_OPTION}}>
    <div class="container">
      <div class="captcha">
        <div class="captcha__pic">
          <img src="data:image/png;base64,{{IMG_BASE64}}" alt="captcha" class="captcha__img" />
        </div>
        <form action="/voicegate.php/check" class="captcha__form">
          <div class="captcha__field">
            <label class="captcha__label">
              <input type="text" name="answer" id="answer" class="capthca__answer" placeholder="Symbols from picture" autofocus/>
              <input name='token' type='hidden' value='{{CAPTCHA_TOKEN}}'>
              <input name='invite' type='hidden' value='{{INVITE_TOKEN}}'>
            </label>
          </div>
          <div class="captcha__controls">
            <button class="captcha__submit" type="submit">Check answer</button>
            <a href="/voicegate.php/badcaptcha?token={{BAD_CAPTCHA_TOKEN}}&invite={{INVITE_TOKEN}}" class="captcha__change">Request another picture</a>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>
